<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DOM Project</title>
		<style>
			/* selector {속성 : 값; } */
			/* *은 전체 */
			body{ /* 위 오른쪽 아래 왼쪽 */
				  padding: 20px 3px 4px 59px; 
				  /* 위아래 10px, 왼쪽 오른쪽 5px; */
				 margin: 10px 5px;
				 /* 위10 오른쪽5 아래왼쪽 3 */
				 margin: 10px 5px 3px;
				  /*background-color:#00FFEE;
				  background-image: url("w3schoolslogo.gif");
				  background-repeat: no-repeat;
				  background-position: center;
				  background-position-x: right;
				  background-position-y: top;*/				  /* css 거의 항상 여러 속성을 한번에 쓰는 shotcut 있다 */
				  background: url("w3schoolslogo.gif") right top no-repeat;
			}
			
			u { 
				text-decoration: none ;
			}
			a { 
				/* 모든 a에 적용 */
			}
			u a{ /* u의 하위에 있는 모든 a에 적용 */
				
			}
			u div a{
				
			}
			#d { 
				/* 아이디가 d 인 모든 것에 적용 */
			}
			.title { 
				/* class가 title인 모든 요소에 적용  */
			}
			h1.title{ 
				/* h1이면서 class가 title에 적용 */
			}
			h2#big{ 
				/* h2이면서 id=big에 적용 */
			}
			h2#big ul{
				/* h2&&id==big의 하위의 ul에 적용 */	
			}
			a:hover{ 
				/* a에 마우스가 올라가면 그때만 적용 */
				background-color: yellow;
			}
			a:active{
				/* a를 마우스로 누르고 있을때만 적용 */
				font-size: 2em;
			}
			a:visited{
				/* 한 번 눌렀던 a태그에 적용 */
				color:#00FFFF;
			}
			a:hover li{
				/* a에 마우스가 올라갈때만 그 하위의 li에 적용 */
			}
			a#div p:hover li{
				
			}
			div, span, li{
				/* div span li 모두에 적용 */
			}
			div{
				/* display : block은 라인breaker */
				display: inherit;
			}
			span{
				/* display : inline은 라인을 유지 */
				display: inherit;	
			}
			h1{
				/* 원래는 라인을 깨트리는데 못깨트리게 바꿈 */
				color: purple;
				display: inline;
				position: inherit;	/* 기본 */
				position: absolute;	/* 절대좌표 */
				left: 100px;
				top: 100px;	/* (100,100) */
				position: fixed;	/* 화면의 어느위치에 고정 */
				left: 100px;
				top: 100px;
				/* absolute와 fixed는 공간을 차지하지 않습니다 */
				position: inherit;
				position: relative;
				left:30px;
				/* relative는 자신의 원래 공간을 양보하지 않는다 */
			}
			article{
				color:#00FFFF;
				color:rgb(233,20,20);
				color:pink;
				text-decoration: blink;
				/* 첫 글자만 대문자 */
				text-transform: capitalize;
				/* 첫 문장의 들여쓰기 */
				text-indent: 10px;
			}
			
		</style>
	</head>
	<body>
		<article>today 오늘은 금요일입니다.</article>
		LineBreaker ; div h1~h6 li tr 
		<script>
			var u=document.createElement("u");
			u.innerHTML="내가 만든 u";
			document.body.appendChild(u);
		</script>
		<h1 class="title">DOM Project Page</h1>
		<script>
			a=document.createElement("a");
			a.href="http://naver.com";
			//2개를 짧게 쓸때 innerHTML쓴다.
			a.innerHTML="네이버 바로 가기";
			u.appendChild(a);
			div=document.createElement("div");
			u.appendChild(div);
			//div에 글자를 넣어주자
			tn=document.createTextNode("텍스트 노드입니다");
			div.appendChild(tn);
			h1=document.getElementsByTagName("h1")[0];
			console.log("h1=",h1.innerHTML);
			h1first=h1.firstChild;
			console.log("h1first=",h1first);
			data=h1first.data;
			console.log("h1first data",data);
			//어디의 자식으로.넣어라(무엇을, u전에다)
			document.body.insertBefore(h1,u);
		</script>
		<div id="d">
			<br><br>개그맨 샘 해밍턴씨의 독도사랑 발언모습...<br>
			<img src="samHamington.png"><br>
			안녕하세요 내 딸의 신발
			<img id="image" src="shoes.jpg" width="100">
		</div>
		<script>
			d=document.getElementById("d");
			image=document.getElementById("image");
			document.write("<br>d의 childNodes="+d.childNodes);
			document.write("<br>d의 nodeName="+d.nodeName);
			document.write("<br>d의 nodeType="+d.nodeType);
			document.write("<br>d의 nodeValue="+d.nodeValue);
			document.write("<br>image의 childNodes="+d.childNodes);
			document.write("<br>image의 nodeName="+d.nodeName);
			document.write("<br>image의 nodeType="+d.nodeType);
			document.write("<br>image의 nodeValue="+d.nodeValue);
			document.write("<br>d.childNodes[0]의 childNodes="+d.childNodes[0].childNodes);
			document.write("<br>d.childNodes[0]의 nodeName="+d.childNodes[0].nodeName);
			document.write("<br>d.childNodes[0]의 nodeType="+d.childNodes[0].nodeType);
			document.write("<br>d.childNodes[0]의 nodeValue="+d.childNodes[0].nodeValue);
		</script>
	</body>
</html>